<template>
  <view class="container">
    <unicloud-db ref="udb" v-slot:default="{data, pagination, loading, hasMore, error}" :collection="collectionList" field="name,content,day,mobile">
      <view v-if="error">{{error.message}}</view>
      <view v-else-if="data">
		<view class="box"  v-for="(data, index) in data" :key="index">
			<view class="item">
			  <text>任务职务:</text>
			  <text>{{data.name}}</text>
			</view>
			<view class="item">
			  <text>任务内容:</text>
			  <text>{{data.content}}</text>
			</view>
			<view class="item">
			  <text>任务周期:</text>
			  <text>{{data.day}}天</text>
			</view>
			<view class="item">
			  <text>联系人:</text>
			  <text>{{data.mobile}}</text>
			</view>
		</view>
       <!-- <uni-list>
          <uni-list-item v-for="(item, index) in data" :key="index" showArrow :clickable="true" @click="handleItemClick(item._id)">
            <template v-slot:body>
              <text>
            
              </text>
            </template>
          </uni-list-item>
        </uni-list> -->
      </view>
      <uni-load-more :status="loading?'loading':(hasMore ? 'more' : 'noMore')"></uni-load-more>
    </unicloud-db>
    <uni-fab ref="fab" horizontal="right" vertical="bottom" :pop-menu="false" @fabClick="fabClick" />
  </view>
</template>

<script>
  const db = uniCloud.database()
  export default {
    data() {
      return {
        collectionList: "work",
        loadMore: {
          contentdown: '',
          contentrefresh: '',
          contentnomore: ''
        }
      }
    },
    onPullDownRefresh() {
      this.$refs.udb.loadData({
        clear: true
      }, () => {
        uni.stopPullDownRefresh()
      })
    },
    onReachBottom() {
      this.$refs.udb.loadMore()
    },
    methods: {
      handleItemClick(id) {
        uni.navigateTo({
          url: './detail?id=' + id
        })
      },
      fabClick() {
        // 打开新增页面
        uni.navigateTo({
          url: './add',
          events: {
            // 监听新增数据成功后, 刷新当前页面数据
            refreshData: () => {
              this.$refs.udb.loadData({
                clear: true
              })
            }
          }
        })
      }
    }
  }
</script>

<style >
	.box {
		width:95vw;
		margin:5px auto;
		box-shadow: 1px 1px 4px 4px rgba(0,0,0,0.3);
		border-radius: 5px;
		padding:5px;
		box-sizing: border-box;
	}
	.item {
		padding:10px 0;
	}
</style>
